﻿@page "/components/menu"
@page "/components/MudMenu"
@page "/components/MudMenuItem"

<DocsPage>
    <DocsPageHeader Title="Menus" Component="@nameof(MudMenu)">
        <Description>
            <MudAlert Class="mt-4" Severity="Severity.Warning">
                Note: Blazor static rendering is not supported.
                <MudLink Href="/getting-started/installation#manual-install-add-components" Target="_blank">See install guide for more info</MudLink>.
            </MudAlert>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Menu">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(MenuSimpleExample)">
                <MenuSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Customization">
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Menu">
                        <Description>The menu button gives you all the options a regular button would.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuCustomizationExample)" ShowCode="false">
                        <MenuCustomizationExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Menu Items">
                        <Description>Use the <CodeInline>Icon</CodeInline> property to show an icon. The <CodeInline>IconSize</CodeInline> and <CodeInline>IconColor</CodeInline> can also be set.</Description>
                    </SectionHeader>
                     <SectionContent Code="@nameof(MenuItemCustomizationExample)" ShowCode="false">
                        <MenuItemCustomizationExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Icon Buttons">
                        <Description>If an Icon is supplied through the <CodeInline>Icon</CodeInline> property, the menu button will display as an <CodeInline>IconButton</CodeInline>.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuIconButtonsExample)" ShowCode="false">
                        <MenuIconButtonsExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Custom Activator">
                        <Description>Using <CodeInline>ActivatorContent</CodeInline>, you can use any user interface element to activate the menu on click. You can place a completely customized button or any other element there.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuActivatorExample1)" ShowCode="false">
                        <MenuActivatorExample1 />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Nested Menu">
                <Description>
                    Multiple menus can be nested.
                    With the <CodeInline>ActivationEvent="MouseEvent.MouseOver"</CodeInline> property, a <CodeInline>MudMenu</CodeInline> component can be used inside of a <CodeInline>MudMenuItem</CodeInline> component to create a simple nested menu.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(MenuWithNestingExample)" ShowCode="true">
                <MenuWithNestingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Max Height Menu">
                <Description>If you have a long list, you can use the <CodeInline>MaxHeight</CodeInline> property to set the maximum height and enable scrolling instead.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(MenuMaxHeightExample)" ShowCode="false">
                <MenuMaxHeightExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Interaction">
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Mouse Events">
                        <Description>With the property <CodeInline>ActivationEvent</CodeInline>, the menu can be opened on different mouse events.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuActivatorExample2)" ShowCode="false">
                        <MenuActivatorExample2/>
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="Cursor Position">
                        <Description>With the property <CodeInline>PositionAtCursor</CodeInline>, the menu will open at the location of the click.</Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuActivatorOnMouseExample)" ShowCode="false">
                        <MenuActivatorOnMouseExample/>
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="Context Menu">
                        <Description>
                            It is possible to open a menu using custom logic. This is useful when implementing context menus.
                            When <CodeInline>Label</CodeInline>, <CodeInline>Icon</CodeInline> and <CodeInline>ActivatorContent</CodeInline> are unset, no 
                            button is rendered and the menu can only be opened programmatically.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(ContextMenuExample)" ShowCode="false">
                        <ContextMenuExample/>
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Placement">
                <Description>
                    The component uses <MudLink Href="/components/popover">MudPopover</MudLink> to place its menu, which can be controlled with <CodeInline>AnchorOrigin</CodeInline> and <CodeInline>TransformOrigin</CodeInline>.<br />
                    To learn and see all possible examples of how you can position the popover check out <MudLink Color="Color.Secondary" Href="/components/popover">its documentation page.</MudLink>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(MenuAdvancedPopoverExample)" ShowCode="false">
                <MenuAdvancedPopoverExample />
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>

